<template>
	<div class="layout-pd">
		<zh-space>
			<zh-card title="">
				<zh-form ref="noticeQueryForm" :model="state.queryParam">
					<zh-form-input prop="title" label="标题" placeholder="支持模糊查询" v-model="state.queryParam.title"></zh-form-input>
					<zh-form-select
						prop="noticeStatus"
						label="发布状态"
						:options="state.dictData.ARTICLESTATUS"
						v-model="state.queryParam.noticeStatus"
					></zh-form-select>
					<template v-if="state.advanced">
						<zh-form-select
							prop="authStatus"
							label="审核状态"
							:options="state.dictData.authStatus"
							v-model="state.queryParam.authStatus"
						></zh-form-select>
						<zh-form-select
							prop="userType"
							label="查看对象"
							:options="state.dictData.userType"
							v-model="state.queryParam.userType"
						></zh-form-select>
						<zh-form-choose-org prop="orgId" label="所属组织" v-model="state.queryParam.orgId"></zh-form-choose-org>
						<zh-form-cascader
							prop="areaCode"
							label="行政区划"
							placeholder="请选择"
							v-model="state.queryParam.areaCode"
							:props="{ checkStrictly: true, emitPath: false }"
							:options="state.areaCodeSelectTreeData"
						></zh-form-cascader>
						<zh-form-select
							prop="appId"
							:lazy="true"
							label="所属应用"
							v-model="state.queryParam.appId"
							:fieldNames="{ label: 'appName', value: 'appId' }"
							funcCode="application0012"
							searchField="appName"
						></zh-form-select>
					</template>
					<zh-form-query v-model="state.advanced" :form-ref="noticeQueryForm" :table-ref="noticeListTable">
						<zh-button style="margin-left: 8px" button-type="add" @click="addNotice" v-func:sysNotice0004> 新增 </zh-button>
					</zh-form-query>
				</zh-form>
			</zh-card>
			<zh-table
				ref="noticeListTable"
				title=""
				funcCode="sysNotice0001"
				:columns="state.tableColumn"
				:disabled="false"
				highlight-current-row
			>
				<template #operate_default="{ row }">
					<el-tooltip effect="dark" content="查看详情" placement="top">
						<zh-button v-func:sysNotice0002 button-type="query" link @click="queryDetail(row)"></zh-button>
					</el-tooltip>
					<el-tooltip effect="dark" content="修改信息" v-if="row.noticeStatus === 'draft'" placement="top">
						<zh-button v-func:sysNotice0005 button-type="edit" link @click="editNotice(row)"></zh-button>
					</el-tooltip>
					<el-tooltip effect="dark" content="提交审核" v-if="row.noticeStatus === 'draft'" placement="top">
						<zh-button v-func:sysNotice0008 icon="ele-Select" link @click="submitAuth(row)"></zh-button>
					</el-tooltip>
					<el-tooltip
						effect="dark"
						:content="row.noticeStatus === 'on' ? '下架' : '上架'"
						placement="top"
						v-if="(row.noticeStatus === 'finish' || row.noticeStatus === 'on' || row.noticeStatus === 'off') && row.authStatus === '1'"
					>
						<zh-button v-func:sysNotice0007 :icon="row.noticeStatus === 'on' ? 'ele-Bottom' : 'ele-Top'" link @click="editPublish(row)"></zh-button>
					</el-tooltip>
					<el-tooltip effect="dark" content="退回到草稿" v-if="row.noticeStatus !== 'on' && row.noticeStatus !== 'draft'" placement="top">
						<zh-button v-func:sysNotice0010 icon="ele-RefreshLeft" link @click="backDraft(row)"></zh-button>
					</el-tooltip>
					<el-tooltip v-if="row.noticeStatus === 'auth'" effect="dark" content="审核" placement="top">
						<zh-button v-func:sysNotice0009 icon="ele-Coordinate" link @click="openAuh(row)"></zh-button>
					</el-tooltip>
					<el-popconfirm v-if="row.noticeStatus !== 'on'" title="是否确认删除?" @confirm="delNotice(row)">
						<template #reference>
							<zh-button type="danger" v-func:sysNotice0006 button-type="del" link></zh-button>
						</template>
					</el-popconfirm>
				</template>
			</zh-table>
		</zh-space>
		<zh-dialog :title="state.modalTitle" width="60%" v-model="state.visible">
			<NoticeForm ref="noticePage" :showFlag="state.showFlag" :noticeInfo="state.selectData" v-model="state.visible" />
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onClose">{{ state.showFlag ? '关闭' : '取消' }}</el-button>
					<el-button v-if="!state.showFlag" type="primary" @click="saveNotice"> 保存 </el-button>
				</span>
			</template>
		</zh-dialog>
		<zh-dialog title="审核" width="45%" v-model="state.authVisible" @confirm="auth">
			<zh-form ref="noticeAuthFormRef" :span="24" :model="state.authForm" :rules="state.authRules">
				<zh-form-select prop="authStatus" label="审核状态" :options="state.authDict" v-model="state.authForm.authStatus"></zh-form-select>
				<zh-form-input :span="24" :rows="4" prop="authRemarks" type="textarea" label="审核意见" v-model="state.authForm.authRemarks"></zh-form-input>
			</zh-form>
		</zh-dialog>
	</div>
</template>

<script lang="tsx" setup name="noticeManager">
import { ElMessageBox, ElMessage } from 'element-plus';
import NoticeForm from './component/NoticeForm.vue';

//------------------定义子组件---------------------------
const noticeQueryForm = ref<any>({});
const noticeListTable = ref<any>({});
const noticePage = ref<any>({});
const noticeAuthFormRef = ref<any>();
//------------------内部变量定义-------------------------
const state = reactive({
	description: '系统状态通知管理',
	dictData: {} as any,
	areaCodeSelectTreeData: [],
	visible: false,
	authVisible: false,
	form: null,
	// 高级搜索 展开/关闭
	advanced: false,
	// 查询参数
	queryParam: {
		paramKey: undefined,
		paramName: undefined,
		paramValue: undefined,
		status: undefined,
		fixed: undefined,
	} as any,
	// 表头
	loading: false,
	tablePage: {
		total: 0,
		currentPage: 1,
		pageNum: 1,
		pageSize: 20,
	},
	authDict: [
		{ dictKey: '1', dictValue: '审核通过' },
		{ dictKey: '2', dictValue: '审核不通过' },
	],
	tableColumn: [
		{ type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号' },
		{ field: 'noticeId', title: '系统状态通知主键', visible: false, fixed: 'left', align: 'center', width: 150 },
		{ field: 'title', title: '标题', align: 'center', fixed: 'left', width: 250 },
		{ field: 'shortTitle', title: '标题简称', align: 'center', width: 250 },
		{
			field: 'noticeStatus',
			title: '状态',
			align: 'center',
			width: 120,
			slots: {
				default: ({ row }) => {
					if (row.noticeStatus === 'draft') {
						//draft 草稿
						return [<zh-badge color="yellow" text={row.noticeStatusName} />];
					} else if (row.noticeStatus === 'auth') {
						//auth 审核中
						return [<zh-badge color="pink" text={row.noticeStatusName} />];
					} else if (row.noticeStatus === 'finish') {
						//finish 准备完成
						return [<zh-badge status="success" text={row.noticeStatusName} />];
					} else if (row.noticeStatus === 'on') {
						//on 发布中
						return [<zh-badge status="processing" text={row.noticeStatusName} />];
					} else if (row.noticeStatus === 'off') {
						//off 下架
						return [<zh-badge status="default" text={row.noticeStatusName} />];
					} else {
						return row.noticeStatus;
					}
				},
			},
		},
		{ field: 'publishTime', title: '发布时间', align: 'center', width: 200 },
		{ field: 'offTime', title: '下架时间', align: 'center', width: 200 },
		{ field: 'publisher', title: '发布主体（人或单位）', align: 'center', width: 250 },
		{
			field: 'authStatus',
			title: '审核状态',
			align: 'center',
			width: 150,
			slots: {
				default: ({ row }) => {
					if (row.authStatus === '0') {
						//未审核
						return [<zh-badge status="processing" text={row.authStatusName} />];
					} else if (row.authStatus === '1') {
						//审核通过
						return [<zh-badge status="success" text={row.authStatusName} />];
					} else if (row.authStatus === '2') {
						//审核不通过
						return [<zh-badge color="red" text={row.authStatusName} />];
					} else {
						return row.authStatusName;
					}
				},
			},
		},
		{ field: 'authRemarks', title: '审核说明', align: 'center', width: 350 },
		{ field: 'authTime', title: '审核时间', align: 'center', width: 200 },
		{ field: 'linkTypeName', title: '链接类型', align: 'center', width: 150 },
		{ field: 'linkUrl', title: '链接地址', align: 'center', width: 150 },
		{ field: 'linkPath', title: '内部路由路径', align: 'center', width: 150 },
		{ field: 'linkName', title: '内部路由名', align: 'center', width: 150 },
		{ field: 'linkParams', title: '链接参数', align: 'center', width: 150 },
		{ field: 'orgName', title: '所属组织', align: 'center', width: 250 },
		{ field: 'areaName', title: '行政区划名称', align: 'center', width: 250 },
		{ field: 'appName', title: '所属应用', align: 'center', width: 250 },
		{ field: 'remarks', title: '备注', align: 'center', showOverflow: true, width: 350 },
		{ field: 'operate', title: '操作', align: 'center', fixed: 'right', width: 220, slots: { default: 'operate_default' } },
	],
	modalTitle: '操作',
	selectData: {} as any,
	showFlag: false,
	authForm: {},
	authRules: {
		authStatus: [
			{
				required: true,
				message: '请选择审核状态',
				trigger: 'blur',
			},
		],
	},
});

//------------------定义调用方法-------------------------
function addNotice() {
	state.modalTitle = '新增';
	state.selectData = {};
	state.showFlag = false;
	state.visible = true;
}
function queryDetail(row) {
	state.modalTitle = '查看详情';
	state.selectData = row;
	state.showFlag = true;
	state.visible = true;
}
function editNotice(row) {
	state.modalTitle = '修改';
	state.selectData = row;
	state.showFlag = false;
	state.visible = true;
}
const onClose = () => {
	state.visible = false;
};
function saveNotice() {
	noticePage.value.save().then(() => {
		noticeListTable.value.refresh(state.queryParam);
	});
}
function openAuh(row) {
	let params = { noticeId: row.noticeId };
	state.authForm = params;
	state.authVisible = true;
}
async function auth() {
	//审核
	let checkFlag = await noticeAuthFormRef.value.checkForm();
	if (checkFlag) {
		$api.common.send.post('sysNotice0009', state.authForm).then(() => {
			ElMessage.success('审核成功！');
			state.authVisible = false;
			noticeListTable.value.refresh(state.queryParam);
		});
	}
}
function submitAuth(row) {
	//提交审核
	ElMessageBox.confirm('是否确认提交审核?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
		center: true,
	})
		.then(() => {
			//调用方法
			let params = { noticeId: row.noticeId };
			$api.common.send.post('sysNotice0008', params).then(() => {
				ElMessage.success('提交成功！');
				noticeListTable.value.refresh(state.queryParam);
			});
		})
		.catch(() => {});
}
function editPublish(row) {
	//上下架
	let message = '上架';
	let noticeStatus = 'on';
	if (row.noticeStatus === 'on') {
		message = '下架';
		noticeStatus = 'off';
	}
	ElMessageBox.confirm('是否确认' + message + '?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
		center: true,
	})
		.then(() => {
			//调用方法
			let params = { noticeId: row.noticeId, noticeStatus: noticeStatus };
			$api.common.send.post('sysNotice0007', params).then(() => {
				ElMessage.success('操作成功！');
				noticeListTable.value.refresh(state.queryParam);
			});
		})
		.catch(() => {});
}
function backDraft(row) {
	//退回到草稿状态
	ElMessageBox.confirm('是否确认回退到草稿状态?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
		center: true,
	})
		.then(() => {
			//调用方法
			let params = { noticeId: row.noticeId };
			$api.common.send.post('sysNotice0010', params).then(() => {
				ElMessage.success('退回成功！');
				noticeListTable.value.refresh(state.queryParam);
			});
		})
		.catch(() => {});
}

function delNotice(row) {
	let params = { noticeId: row.noticeId };
	setTimeout(() => {
		$api.common.send
			.post('sysNotice0006', params)
			.then(() => {
				$messageBox.success('删除成功', '成功提示');
				noticeListTable.value.refresh(state.queryParam);
			})
			.catch(() => {});
	}, 20);
}
function getAreaCodeData() {
	setTimeout(() => {
		$api.common.send.post('dict0026', {}).then((res) => {
			state.areaCodeSelectTreeData = res.result;
		});
	}, 20);
}

//------------------初始化------------------------------
const params = {
	dictFields: 'ARTICLESTATUS,authStatus,userType',
};
$api.common.getBatchDict.post(params).then((res) => {
	state.dictData = res.result;
});
onMounted(() => {
	nextTick(() => {
		getAreaCodeData();
		noticeListTable.value.query(state.queryParam);
	});
});
</script>
